<template>
  <div class="semester_box" v-loading="loading">
    <div class="semester_addbtn">
      <el-button icon="plus" @click="openAddDialog()" type="primary">
        新增学生
      </el-button>
    </div>
    <el-table
      :data="studentDatas?.list"
      border
      :header-row-style="{ color: '#232324', fontWeight: 'bold' }"
    >
      <el-table-column
        align="center"
        label="学生ID"
        min-width="120"
        prop="studentId"
      />
      <el-table-column
        align="center"
        label="姓名"
        min-width="120"
        prop="name"
      />
      <el-table-column align="center" label="性别" min-width="80" prop="gender">
        <template #default="scope">
          <span v-if="scope.row.gender == 'male'">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="学院"
        min-width="160"
        prop="department"
      />
      <el-table-column
        align="center"
        label="专业"
        min-width="120"
        prop="major"
      />
      <el-table-column
        align="center"
        label="班级"
        min-width="120"
        prop="sclass"
      />
      <el-table-column
        align="center"
        label="联系方式"
        min-width="160"
        prop="phone"
      />
      <el-table-column
        align="center"
        label="入学日期"
        min-width="180"
        prop="enrollDate"
      />
      <el-table-column
        align="center"
        label="家庭住址"
        min-width="180"
        prop="address"
      />
      <el-table-column
        align="center"
        label="身份证号"
        min-width="180"
        prop="idCard"
      />
      <el-table-column
        align="center"
        label="出生日期"
        min-width="120"
        prop="birthday"
      />
      <el-table-column
        align="center"
        label="创建时间"
        min-width="180"
        prop="createTime"
      />
      <el-table-column align="center" fixed="right" label="操作" width="300">
        <template #default="scope">
          <el-button
            type="primary"
            link
            icon="edit"
            @click="openEditDialog(scope.row)"
          >
            编辑
          </el-button>
          <!-- 删除学生 -->
          <el-popconfirm
            :icon="InfoFilled"
            icon-color="#626AEF"
            width="180"
            title="是否删除该学生?"
            @confirm="deletestudentById(scope.row.studentId)"
          >
            <template #reference>
              <el-button type="primary" link icon="delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 12px"
      v-model:current-page="studentPageParmas.pageNum"
      v-model:page-size="studentPageParmas.pageSize"
      :page-sizes="[10, 20, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      v-model="dialogFormVisible"
      :title="dialogTitle"
      style="min-width: 320px"
    >
      <el-form
        v-if="dialogFormVisible"
        ref="studentForms"
        :inline="true"
        :model="studentForm"
        :rules="rules"
        label-position="top"
        label-width="85px"
      >
        <el-form-item label="学号" prop="studentId" style="width: 55%">
          <el-input
            v-model="studentForm.studentId"
            placeholder="请输入学生的学号"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="name" style="width: 55%">
          <el-input v-model="studentForm.name" placeholder="请输入学生的姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender" style="width: 55%">
          <el-radio-group v-model="studentForm.gender">
            <el-radio label="male">男性</el-radio>
            <el-radio label="female">女性</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday" style="width: 55%">
          <el-date-picker
            v-model="studentForm.birthday"
            type="date"
            placeholder="请输入学生的出生日期"
          />
        </el-form-item>
        <el-form-item label="学院" prop="department" style="width: 55%">
          <el-input
            v-model="studentForm.department"
            placeholder="请输入学生的学院"
          />
        </el-form-item>
        <el-form-item label="专业" prop="major" style="width: 55%">
          <el-input
            v-model="studentForm.major"
            placeholder="请输入学生的专业"
          />
        </el-form-item>
        <el-form-item label="班级" prop="sclass" style="width: 55%">
          <el-input
            v-model="studentForm.sclass"
            placeholder="请输入学生的班级"
          />
        </el-form-item>
        <el-form-item label="入学日期" prop="enrollDate" style="width: 55%">
          <el-date-picker
            v-model="studentForm.enrollDate"
            type="date"
            placeholder="请输入学生的入学日期"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone" style="width: 55%">
          <el-input
            v-model="studentForm.phone"
            placeholder="请输入学生的联系方式"
          />
        </el-form-item>
        <el-form-item label="家庭住址" prop="address" style="width: 55%">
          <el-input
            v-model="studentForm.address"
            placeholder="请输入学生的家庭住址"
          />
        </el-form-item>
        <el-form-item label="身份证号码" prop="idCard" style="width: 55%">
          <el-input
            v-model="studentForm.idCard"
            placeholder="请输入学生的身份证号码"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="formConfirm(studentForms)">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import {
  AdminAddStudentParams,
  AdminGetStudentRes,
  AdminUpadeStudentParams,
} from '@/api/student/type'
import {
  adminAddStudent,
  adminDeleteStudent,
  adminGetStudent,
  adminUpadeStudent,
} from '@/api/student'

onMounted(async () => {
  await getstudentInfoPage()
})

const dialogFormVisible = ref<boolean>(false)

const studentPageParmas: any = reactive({
  pageNum: 1,
  pageSize: 10,
})

const loading = ref(false)

const studentDatas = ref<any>()

const total = ref(0)

const studentForms = ref<FormInstance>()

let studentForm: any = reactive({
  studentId: 0,
  gender: '',
  birthday: '',
  department: '',
  major: '',
  sclass: '',
  enrollDate: '',
  phone: '',
  address: '',
  idCard: '',
})

const rules = reactive({
  studentId: [{ required: true, message: '请输入学生工号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请输入学生性别', trigger: 'blur' }],
  birthday: [{ required: true, message: '请输入学生生日', trigger: 'blur' }],
  major: [{ required: true, message: '请输入学生专业', trigger: 'blur' }],
  sclass: [{ required: true, message: '请输入学生班级', trigger: 'blur' }],
  enrollDate: [
    { required: true, message: '请输入学生入学日期', trigger: 'blur' },
  ],
  department: [{ required: true, message: '请输入学生学院', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入学生联系方式', trigger: 'blur' }],
  address: [{ required: true, message: '请输入学生家庭住址', trigger: 'blur' }],
  idCard: [{ required: true, message: '请输入学生身份证号', trigger: 'blur' }],
})

// 添加菜单方法，id为 0则为添加根菜单
const dialogTitle = ref('新增学生')
const isEdit = ref(false)

const getstudentInfoPage = async () => {
  loading.value = true
  try {
    const { data } = await adminGetStudent(studentPageParmas)
    studentDatas.value = data
    total.value = data.total
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(error.message)
    }
  } finally {
    loading.value = false
  }
}

const deletestudentById = async (id: number) => {
  try {
    const { message } = await adminDeleteStudent(id)
    ElMessage.success(message)
    await getstudentInfoPage()
  } catch (error) {
    ElMessage.error((error as Error).message)
  }
}

//添加信息
const addstudent = async () => {
  try {
    const { message } = await adminAddStudent(studentForm)
    ElMessage.success(message)
    studentForm = {
      studentId: 0,
      gender: '',
      birthday: '',
      department: '',
      major: '',
      sclass: '',
      enrollDate: '',
      phone: '',
      address: '',
      idCard: '',
    }
    await getstudentInfoPage()
  } catch (error) {
    ElMessage.error((error as Error).message)
  }
}

const updatestudent = async () => {
  try {
    const { message } = await adminUpadeStudent(studentForm)
    ElMessage.success(message)
    await getstudentInfoPage()
  } catch (error) {
    ElMessage.error((error as Error).message)
  }
}

//确认添加
const formConfirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      if (isEdit.value) {
        updatestudent()
      } else {
        addstudent()
      }
      dialogFormVisible.value = false
    }
  })
}

const openAddDialog = () => {
  isEdit.value = false
  if (studentForm.studentId != '0') {
    studentForm = {
      studentId: 0,
      gender: '',
      birthday: '',
      department: '',
      major: '',
      sclass: '',
      enrollDate: '',
      phone: '',
      address: '',
      idCard: '',
    }
  }
  dialogTitle.value = '新增学生'
  dialogFormVisible.value = true
}

// 修改菜单方法
const openEditDialog = async (data: any) => {
  isEdit.value = true
  dialogTitle.value = '编辑学生'
  studentForm.studentId = data.studentId
  studentForm.name = data.name
  studentForm.gender = data.gender
  studentForm.birthday = data.birthday
  studentForm.department = data.department
  studentForm.major = data.major
  studentForm.sclass = data.sclass
  studentForm.enrollDate = data.enrollDate
  studentForm.phone = data.phone
  studentForm.address = data.address
  studentForm.idCard = data.idCard
  dialogFormVisible.value = true
}

const handleSizeChange = (val: number) => {
  getstudentInfoPage()
}
const handleCurrentChange = (val: number) => {
  getstudentInfoPage()
}
</script>
<style scoped lang="scss">
.semester_box {
  padding: 24px;

  .semester_addbtn {
    margin-bottom: 12px;
    display: flex;
  }
}
</style>
